<template>
	<view>
		<view class="box_1">
			<view class="avatar_box">
				<image :src="info.photo" :alt="info.name"></image>
			</view>
			<view class="name">{{ info.name }}</view>
		</view>
		<view class="form_split_10"></view>
		<view class="box_2">
			<view class="handle_line l1">
				手机号
				<view class="right_txt">{{ info.mobile ? info.mobile : "暂无" }}</view>
			</view>
			<view class="handle_line l2">
				联系电话
				<view class="right_txt">{{ info.tel ? info.tel : "暂无" }}</view>
			</view>
			<!-- <view class="handle_line l3">
        微信号
        <view class="right_txt">{{ info.weixin ? info.weixin : "暂无" }}</view>
      </view> -->
			<view class="handle_line l4">
				联系QQ
				<view class="right_txt">{{ info.qq ? info.qq : "暂无" }}</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<!-- <view class="box_2">
      <view class="handle_line arrow l5">
        投诉客服
        <view class="right_txt" 
		@click="handleClick()">
		请填写投诉信息
		</view>
      </view>
    </view> -->
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'ExclusiveService',
		data() {
			return {
				info: {}
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			handleClick() {
				uni.navigateTo({
					url: '/company/AccountManage/CustomerServiceComplaintIndex?cs_id=' + this.info.id
				})
			},
			fetchData() {
				http
					.get(api.customer_service, {})
					.then(res => {
						this.info = {
							...res.data.data.info
						}
					})
					.catch(() => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.handle_line {
		&.l5 {
			background-image: url($ImgUrl + "exc_l5.png");
			background-color: #ffffff;
			background-position: 40rpx center;
			background-repeat: no-repeat;
			background-size: 36rpx;
		}

		&.l4 {
			background-image: url($ImgUrl + "exc_l4.png");
			background-color: #ffffff;
			background-position: 40rpx center;
			background-repeat: no-repeat;
			background-size: 36rpx;
		}

		&.l3 {
			background-image: url($ImgUrl + "exc_l3.png");
			background-color: #ffffff;
			background-position: 40rpx center;
			background-repeat: no-repeat;
			background-size: 40rpx 37rpx;
		}

		&.l2 {
			background-image: url($ImgUrl + "exc_l2.png");
			background-color: #ffffff;
			background-position: 40rpx center;
			background-repeat: no-repeat;
			background-size: 38rpx;
		}

		&.l1 {
			background-image: url($ImgUrl + "exc_l1.png");
			background-color: #ffffff;
			background-position: 42rpx center;
			background-repeat: no-repeat;
			background-size: 32rpx 38rpx;
		}

		font-size: 32rpx;
		color: #333333;
		padding: 30rpx 0 30rpx 104rpx;
		position: relative;

		.right_txt {
			position: absolute;
			right: 68rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 28rpx;
			color: #c9c9c9;
		}

		&.arrow::before {
			position: absolute;
			right: 46rpx;
			top: 44rpx;
			width: 14rpx;
			height: 14rpx;
			border-top: 2rpx solid #999999;
			border-right: 2rpx solid #999999;
			transform: rotate(45deg);
			content: "";
		}

		&:not(:last-child)::after {
			content: " ";
			position: absolute;
			pointer-events: none;
			right: 0;
			bottom: 0;
			left: 104rpx;
			border-bottom: 2rpx solid #f3f3f3;
		}
	}

	.box_2 {
		width: 100%;
		background-color: #ffffff;
	}

	.box_1 {
		.name {
			padding: 22rpx 0 62rpx;
			text-align: center;
			font-size: 34rpx;
			color: #333333;
			font-weight: bold;
		}

		.avatar_box {
			width: 140rpx;
			height: 140rpx;
			margin: 0 auto;

			image {
				width: 140rpx;
				height: 140rpx;
				border: 0;
				border-radius: 100%;
			}
		}

		width: 100%;
		background-color: #ffffff;
		padding-top: 70rpx;
	}
</style>
